<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
</head>
<body>
      <div class="container">
            <button class="btn">你好</button>
            <button>你好</button>
            <button>你好</button>
            <button class="btn">你好</button>
            <button class="btn">你好</button>
      </div>

      <script src="./jquery.js"></script>
      <script>
            // 1. 基本API使用 ;
            // on 事件监听 , off 移除事件监听;
            // $(".btn").on("click" , function(){
            //       console.log("hello 你好啊");
            // })
            // $(".btn").on("click" , function(){
            //       console.log("hello 你好啊a a a ");
            // })

            // 清除所有的click事件处理函数;
            // $(".btn").off("click");

            // 下载网站流氓按钮;
            // 设置一个标志变量;
            // var flag = false;
            // $(".btn").on("click.lm" , function(){
            //       console.log("跳转到流氓网站");
            //       flag = true;
            // });

            // $(".btn").on("click" , function(){
            //       if(!flag){
            //             console.log("跳转到正常网站");
            //       }else{
            //             // 1. 删除流氓网站跳转事件;
            //             // 2. 更改标识变量内容;
            //             flag = false;
            //             $(".btn").off("click.lm");
            //       }
            // })
            // 我们off移除某个事件，都是用事件的小名作为标志来进行移除的;
            // 这样的移除更为精准;
            // 备注 : 小名可以自己定义;
            
            // 事件委托 : 
            // 事件委托的开启，是在中间传递一个委托元素选择器的参数;
            // $(".container").on("click", ".btn" , function(){
            //       console.log("事件触发");
            // })


            // 自定义事件触发;

            // trigger => 会触发事件冒泡 || triggerHandler  => 不会触发事件冒泡;

            $(".btn").eq(0).on("click" , function(){
                  console.log("事件触发 这是 btn")
            })
            $(".container").on("click" , function(){
                  console.log("事件触发 这是 contaienr")
            })
            $("body").on("click" , function(){
                  console.log("事件触发 这是 body")
            })
            
            // $(".btn").eq(0).trigger("click");
            $(".btn").eq(0).triggerHandler("click");

      </script>
</body>
</html>